<template>
  <el-container>
    <div class="logo">
      <p v-show="!collapse.isHidden">新企业营销管理后台</p>
      <img v-show="collapse.isHidden" src="../assets/logo.png" alt />
    </div>

    <el-menu
      :default-active="this.$route.path.substr(6)"
      background-color="#304156"
      text-color="#bfcbd9"
      active-text-color="#1991ca"
      unique-opened
      :collapse-transition="false"
      router
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      :collapse="collapse.isHidden"
    >
      <el-menu-item index="home" @click="page.name = '管理中心'">
        <i class="el-icon-s-home" id="iconTag"></i>
        <span slot="title" style="font-size: 1.527rem">首页</span>
      </el-menu-item>
      <!-- <el-menu-item index="logger" @click="page.name = '日志管理'">
        <i class="el-icon-sunset" id="iconTag"></i>
        <span slot="title" id="oneTag" style="font-size: 1.527rem"
          >日志管理</span
        >
      </el-menu-item>-->
      <div v-for="menu in menuList" :key="menu.id">
        <el-submenu :index="menu.id + ''" v-if="menu.type==1 " v-show="!menu.isHide" :key="menu.id">
          <template slot="title">
            <i :class="menu.icon" id="iconTag"></i>
            <span slot="title" id="onetag">{{ menu.name }}</span>
          </template>

          <el-menu-item
            :index="cmenu.path.substr(1) + ''"
            v-for="cmenu in menu.children"
            v-show="!cmenu.isHide"
            :key="cmenu.id"
            @click="page.name = `${cmenu.name}`"
          >
            <i :class="cmenu.icon" id="iconTag"></i>
            <span slot="title" id="twotag">{{ cmenu.name }}</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item id="onetag" :index="'/main'+menu.path" v-show="!menu.isHide" v-else>
          <i :class="menu.icon" id="iconTag"></i>
          <span slot="title" id="onetag">{{ menu.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </el-container>
</template>

<script>
import axios from "../utils/axios";
import eventBus from "../utils/eventBus";
export default {
  name: "Aside",
  props: ["collapse", "page"],
  data() {
    return {
      menuList: [],
      gengxin: ""
    };
  },
  created() {
    this.getMenulist();
  },
  watch: {
    gengxin: {
      handler() {
        this.getMenulist();
      },
      immediate: true
    }
  },

  methods: {
    getdatime() {
      const that = this;
      eventBus.$on("gengxin", function(val) {
        console.log(val);
        that.gengxin = val;
      });
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    getMenulist() {
      //获取菜单列表

      axios({
        method: "GET",
        url: "/sys/menu/tree",
        params: { roleId: localStorage.getItem("userId") }
      }).then(response => {
        if (response.code === 200) {
          //一级菜单
          console.log("一级菜单");
          console.log(response);
          this.menuList = response.data;
        }
      });
    }
  }
};
</script>

<style scoped>
p {
  color: aqua;
}
.el-menu-vertical-demo {
  width: 100%;
  min-height: 40rem;
  background-color: #304156;
}
.el-menu {
  height: calc(100vh - 60px);
  border-right: none;
  background-color: #304156;
  width: 100%;
  text-align: left;
}
.el-menu-item /deep/ {
  width: 100%;
  font-size: 1.7rem;
  display: list-item;
  text-align: left;
}

.logo {
  height: 5rem;
  color: white;
  text-align: center;
  line-height: 5rem;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  background-color: #304156;
}
.logo img {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.el-container /deep/ {
  font-size: 1.8rem;

  width: 100%;
  background-color: #304156;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}
#onetag {
  font-size: 1.527rem;
}
#twotag {
  font-size: 1.527rem;
  /* color: #1991ca; */
}
#thrtag {
  font-size: 1.4rem;
  color: #1991ca;
}
#iconTag {
  font-size: 1.8rem;
  margin-right: 1.6rem;
}
</style>